Vue.filter("UrlEncode", function (value) {
    return decodeURI(value);
})

Vue.http.options.emulateJSON = true;
Vue.component("v-header", {
    template: "<div class='header'> <div class='left-icon' v-on:click='back'> <i class='fa fa-chevron-left' aria-hidden='true'></i> </div> <span class='page-title'>{{pageTitle}}</span> </div>",
    props: ["pageTitle"],
    methods: {
        back: function () {
            history.back(-1);
        }
    }
})


Vue.component("optionSelector", {

    template: "<div class='option-selector'>\
                    <span v-on:click='alert'>{{text}}<i class='fa fa-caret-down' aria-hidden='true'></i></span>\
                    <div class='option-alert-warpper' v-show='isShow'>\
                        <div class='option-alert' v-bind:class=\"{ 'display-left\': isLeft}\">\
                             <div class='triangle-warpper'>\
                                <div class='triangle' v-bind:class=\"{ 'triangle-left\': triangleLeft}\"></div>\
                                <div class='triangle-border' v-bind:class=\"{ 'triangle-border-left\': triangleBorderRight}\"></div>\
                            </div>\
                            <div class='option-list'  >\
                                <div class='item' v-on:click='select' v-for='(data,index) in itemList' :index='index'>\
                                <span :index='index'>{{data.key}}</span>\
                                </div>\
                            </div>\
                        </div>\
                    </div>\
                </div>",
    props: ["itemList", "text", "index", "totalIndex"],
    data: function () {
        return {
            isShow: false,
            isLeft: false,
            triangleLeft: false,
            triangleBorderRight: false
        }
    },
    created: function () {
        var self = this;
        this.$root.eventHub.$on('open-selector', function (data) {
            if (self != data) {
                self.isShow = false;
            }
        })
    },
    methods: {
        alert: function () {
            if (this.index <= this.totalIndex / 2) {
                this.isLeft = true;
                this.triangleLeft = true;
                this.triangleBorderRight = true;
            } else {
                this.isLeft = false;
                this.triangleLeft = false;
                this.triangleBorderRight = false;
            }
            if (this.isShow == false) {
                this.$root.eventHub.$emit('open-selector', this);
            }
            this.isShow = !this.isShow;


        },
        select: function (event) {

            this.isShow = false;
            var index = event.target.getAttribute("index");
            this.$parent.config.display[this.index].key = this.itemList[index].key;
            this.$parent.changeColData(this.index, this.itemList[index].value);

        }
    }
})


function hasSubStr(subStr, str) {
    console.log(str)
    if (subStr == "") {
        return true;
    }
    return str.lastIndexOf(subStr) != -1;
}


var multiSelectorConfig = {
    custNo: {
        url: "../info/custList",
        name: "custNo",
        value: "custno",
        displayField: "custcname",
        displayField2: "custno"
    },
    contractNo: {

        url: "../info/contractList",
        name: "contractNo",
        value: "billno",
        displayField: "billno"
    },
    prodName: {
        url: "../info/productList",
        name: "prodName",
        value: "prodcname",
        displayField: "prodcname"
    },
    prodNo: {
        url: "../info/productList",
        name: "prodNo",
        value: "prodno",
        displayField: "prodno"
    },
    batchNo: {
        url: "../info/batchItemList",
        name: "batchNo",
        value: "batchno",
        displayField: "batchno",
        isList: true
    },
    extraNo: {
        url: "../info/extraNoList",
        name: "extraNo",
        value: "extrano",
        displayField: "extrano"
    }

}

Vue.component("multiSelector", {

    template: "<div class='multi-selector'>\
                    <div class='header'  v-show='isShow'>\
                    <div class='left-icon' @click='close'><i class='fa fa-close'' aria-hidden='true'></i></div> <span class='page-title'>查询条件选择</span>\
                    </div>\
                    <div class='button button-blue more-btn' v-on:click='alert'>···</div>\
                <div class='selector-body' v-show='isShow'>\
                    <div class='search-label'>\
                        <div class='row' style='margin:15px 0'>\
                            <div class='input-group'>\
                                <div class='input-warp'>\
                                    <input type='text' class='input' v-model='searchText'/>\
                                </div>\
                            <div class='button button-blue search-btn' v-on:click='search'>查询</div>\
                            </div>\
                        </div>\
                    </div>\
                    <div class='selector-list' :id='config[name].name'>\
                        <div class='item' v-on:click='select(index)' v-for='index in maxLength' :index='index' v-if='itemList[index]' v-show='itemList[index].display'>\
                            <div class='content'>\
                            <span class='displayField2' :index='index' v-if='itemList[index][config[name].displayField2]'>{{itemList[index][config[name].displayField2]}}</span><span :index='index' class='displayField1'>{{itemList[index][config[name].displayField]}}</span>\
                            </div>\
                        </div>\
                        <div class='refresh-bar' v-show='refreshShow'><i class='fa fa-spinner fa-spin fa-3x fa-fw'></i></div>\
                    </div>\
                </div>\
                </div>",


    props: ["name", "input"],
    data: function () {
        return {
            isShow: false,
            maxLength: 800,
            itemList: [],
            key: "",
            searchText: "",
            refreshShow: false,
            pagination: {},
            isLoading: false,
            closeShow: false,
            config: {
                custNo: {
                    url: "../info/custList",
                    name: "custNo",
                    value: "custno",
                    displayField: "custcname",
                    displayField2: "custno"
                },
                custName: {
                    url: "../info/custList",
                    name: "custName",
                    value: "custcname",
                    displayField: "custcname",
                    displayField2: "custno"
                },
                contractNo: {

                    url: "../info/contractList",
                    name: "contractNo",
                    value: "billno",
                    displayField: "billno"
                },
                prodName: {
                    url: "../info/productList",
                    name: "prodName",
                    value: "prodcname",
                    displayField: "prodcname"
                },
                prodNo: {
                    url: "../info/productList",
                    name: "prodNo",
                    value: "prodno",
                    displayField: "prodno"
                },
                batchNo: {
                    url: "../info/batchItemList",
                    name: "batchNo",
                    value: "batchno",
                    displayField: "batchno",
                    isList: true
                },
                extraNo: {
                    url: "../info/extraNoList",
                    name: "extraNo",
                    value: "extrano",
                    displayField: "extrano"
                }

            }
        }
    },
    created: function () {

    },
    mounted: function () {
        var self = this;
        var config = this.config[this.name];
        console.log(config.url)
        var slider = document.getElementById(config.name);
        slider.addEventListener("touchstart", function (event) {
        })
        slider.addEventListener("touchmove", function (event) {
            if (slider.scrollHeight - slider.scrollTop == slider.clientHeight) {
                if (self.isLoading) return;
                if (!self.pagination.hasNextPage) return;
                self.refreshShow = true;
                self.isLoading = true;
                var url = config.url + "?pageNum=" + self.pagination.nextPage + "&pageSize=" + self.pagination.pageSize;
                console.log(url)
                $.ajax({
                    type: "get",
                    url: url,
                    async: false,
                    dataType: "json",
                    success: function (data) {
                        var dataList = data.list;
                        for (item in dataList) {
                            dataList[item].display = true;
                        }
                        var itemList = dataList;
                        self.pagination = data;

                        var copy = self.itemList.slice(0);
                        for (var item in itemList) {
                            copy.push(itemList[item])
                        }
                        setTimeout(function () {
                            self.itemList = copy;
                            self.refreshShow = false;
                            self.isLoading = false;
                        }, 500)
                    }

                });
                event.preventDefault();
            }
        })
    },
    methods: {
        alert: function () {
            this.closeShow = true;
            this.isShow = true
            var self = this;
            var config = this.config[this.name];
            $.ajax({
                type: "get",
                url: config.url + "?pageNum=1&pageSize=20",
                async: false,
                dataType: "json",
                success: function (data) {
                    var dataList = data.list;
                    for (item in dataList) {
                        dataList[item].display = true;
                    }
                    self.itemList = dataList;
                    self.pagination = data;
                }
            });

        },
        select: function (index) {
            this.isShow = false;
            var config = this.config[this.name];
            this.$parent.params[config.name] = this.itemList[index][config.value];
            //this.input=this.itemList[config.value]
            this.closeShow = false;
        },
        search: function () {
            for (item in this.itemList) {
                var bool = hasSubStr(this.searchText.trim(), this.itemList[item][this.config.displayField]);
                if (!bool) {
                    this.itemList[item].display = false;
                } else {
                    this.itemList[item].display = true;
                }

            }
        },
        close: function () {
            this.isShow = false;
            this.closeShow = false;
        }
    }
})


Vue.component("report-form", {
    template: "<div>\
                    <div class='slider' id='slider'>\
                    <div class='query-condition'>\
                    <p class='condition' v-for='(value,key) in config.searchConditions' v-if='queryParams[key]'><span >{{value}}：<span>{{queryParams[key]|UrlEncode}}</span></span></p>\
                    </div>\
                    <table border='' cellspacing='10px' cellpadding='10px' class='report-form'>\
                        <thead>\
                            <tr class='report-head'>\
                                <th width='20%' v-for='(value,index) in config.display'>\
                                    <option-selector :item-list='config.itemList' :text='value.key' :index='index' v-if='value.enable' :total-index='5'></option-selector>\
                                    <span v-if='!value.enable'>{{value.key}}</span>\
                                </th>\
                            </tr>\
                         </thead>\
                         <tbody class='report-container' v-show='dataMatrix.length!=0'>\
                             <tr v-for='(row,rowIndex) in dataMatrix' :row='rowIndex' :class='{\"tr-selected\":selectedIndex==rowIndex,\"tr-summary\":row[0]==null,\"tr-nomal\":row[0]!=null,\"tr-odd\":rowIndex%2!=0,\"tr-even\":rowIndex%2==0}' @click='selectRow(rowIndex)'>\
                                <td class='column' v-for='(col,colIndex) in row' :column='colIndex'><p :class='{\"ch-con-m\":dataMatrix[rowIndex][colIndex]==null?false:dataMatrix[rowIndex][colIndex].length>6,\"ch-con-h\":dataMatrix[rowIndex][colIndex]==null?false:dataMatrix[rowIndex][colIndex].length>12}'>{{dataMatrix[rowIndex][colIndex]}}</p></td>\
                            </tr>\
                         </tbody>\
                    </table>\
                    <div class='loading' v-show='dataMatrix.length==0'><i class='fa fa-spinner fa-spin fa-3x fa-fw'></i></div>\
                     <div class='refresh-bar' v-show='refreshShow'><i class='fa fa-spinner fa-spin fa-3x fa-fw'></i></div>\
                    </div>\
                    <div class='button button-blue report-details' v-on:click='viewDetails' v-show='selectedIndex!=null'>{{detailName}}</div>\
                </div>",
    props: ["config", "queryParams"],
    data: function () {
        return {
            dataList: [],
            dataMatrix: [],
            selectedIndex: null,
            detailName: "",
            page:1,
            hasNextPage:true,
            refreshShow: false,
            isLoading: false
        }
    },
    mounted: function () {
        var self =this;
        var formData=this.getDataMatrix(0);

        var slider = $(".slider")[0];
        slider.addEventListener("touchmove", function (event) {
            if (slider.scrollHeight - slider.scrollTop == slider.clientHeight) {
                if (self.isLoading) return;
                if (!self.hasNextPage) return;
                self.refreshShow = true;
                self.isLoading = true;

                self.getDataMatrix(1)
                event.preventDefault();
            }
        })


    },
    methods: {
        selectRow: function (rowIndex) {

            if (this.config.details) {
                this.selectedIndex = this.selectedIndex == rowIndex ? null : rowIndex;
            }

        },
        viewDetails: function () {

            var selectedRow = this.dataList[this.selectedIndex];
            var name = this.config.details.name;
            var url = this.config.details.url;
            var param = this.config.details.param;
            window.location = url + "?" + "beginDate=" + this.queryParams["beginDate"] + "&" + "endDate=" + this.queryParams["endDate"] + "&" + param + "=" + selectedRow[param] + "&" + "name=" + name;
        },
        changeColData: function (index, val) {
            console.log(this.dataMatrix)
            this.dataMatrix = this.dataMatrix.slice(0);

            for (row in this.dataMatrix) {
                this.dataMatrix[row][index] = this.dataList[row][val];
            }
        },
        getDataMatrix: function (pattern) {
            var self = this;
            var params = util.getUrlParams()
            //获取报表数据

            var config = self.config;
            var url = config.url;
            var display = config.display;
            var summary = config.summary;
            var dataList = null;

            if(pattern==1){
                params["page"]=self.page+1
            }

            this.$http.post(url, params).then(function (response) {
                if(response.body.status!=100) return;
                dataList = response.body.result.list;
                if(dataList.length==0){
                    self.hasNextPage=false;
                    setTimeout(function () {
                        self.refreshShow = false;
                        self.isLoading = false;
                    }, 500)
                    return;
                }
                console.log(dataList)
                //深复制对象方法
                var cloneObj = function (obj) {
                    var newObj = {};
                    for (var key in obj) {
                        newObj[key] = obj[key];
                        if (summary.list[key]) {
                            newObj[key] = obj[key];
                        } else {
                            newObj[key] = null;
                        }
                    }
                    newObj[summary.textField] = summary.text;
                    console.log(newObj[summary.textField])
                    return newObj;
                };

                if (summary && dataList.length != 0) {
                    var flag = dataList[0][summary.field];
                    var obj = null;
                    var flagIndex = 0;

                    var resultList = []
                    for (var index = 0; index < dataList.length; index++) {

                        if (dataList[index][summary.field] != flag) {
                            obj = cloneObj(dataList[flagIndex])
                            for (var t = flagIndex + 1; t < index; t++) {

                                for (var name in dataList[0]) {
                                    if (summary.list[name] == "1") {
                                        obj[name] += dataList[t][name];
                                    } else {
                                        if (name != summary.textField) {
                                            obj[name] = null;
                                        }

                                    }
                                }
                            }
                            flag = dataList[index][summary.field];
                            flagIndex = index;

                            resultList.push(obj)
                        }
                        resultList.push(dataList[index])
                    }
                    dataList = resultList;
                }


                var dataMatrix = [];
                for (var i in dataList) {
                    var arr = [];
                    for (var z in display) {
                        var val = dataList[i][display[z].value]
                        /*if(util.CheckChinese(val)){
                         val="<p class='ch-con'>"+val+"</p>"
                         }*/
                        arr.push(val);
                    }
                    dataMatrix.push(arr);
                }

                if (this.config.details) {
                    this.detailName = this.config.details.detailName;
                }
                if(pattern==0){
                    self.dataList = dataList;
                    self.dataMatrix = dataMatrix;
                }else{
                    var dataListTemp =self.dataList;
                    for(var b in dataList){
                        dataListTemp.push(dataList[b])
                    }
                    self.dataList = dataListTemp;

                    var dataMatrixTemp =self.dataMatrix;
                    for(var z in dataMatrix){
                        dataMatrixTemp.push(dataMatrix[z])
                    }
                    self.dataMatrix = dataMatrixTemp;
                    setTimeout(function () {
                        self.refreshShow = false;
                        self.isLoading = false;
                    }, 500)
                    self.page++;
                }


            }, function () {

            })
        }
    }
})


Vue.component("field-selector", {
    template: "<div class='multi-field-selector'  :class='{\"show\":isShow}'>\
					<span @click='drop'>{{fieldSet.set[fieldSet.display].key}}</span>\
					<div @click='drop'><i class='fa fa-caret-down' aria-hidden='true'></i></div>\
					<ul class='field-list' v-show='isShow' >\
						<li v-for='value in fieldSet.set' @click='select(value.value)'>{{value.key}}</li>\
					</ul>\
					</div>",
    props: ["fieldSet"],
    data: function () {
        return {
            isShow: false
        }
    },
    methods: {
        drop: function () {
            this.isShow = !this.isShow;
        },
        select: function (val) {
            this.isShow = false;
            this.fieldSet.display = val
            console.log(this.fieldSet.display)
        }
    },
    watch: {}

})